// 由于webpack是基于node构建的，所以使用node语法
const path = require('path');
// 将html文件也放入内存映射到硬盘，同时自动将打包的bundle.js加入到html底部，html中不在需要手动引入bundle.js
const htmlWebpackPlugin = require('html-webpack-plugin');

// 支持vue模板文件处理
const VueLoaderPlugin = require('vue-loader/lib/plugin');

// 暴漏配置项
// 当不使用webpack.config.js时，运行webpack 或 webpack-dev-server命令需要通过命令行传参执行
// 当使用webpack.config.js时，直接运行webpack 或 webpack-dev-server命令即可，不需要加参数，自动加载根目录webpack.config.js配置文件
module.exports = {
    entry: path.join(__dirname, './src/index.js'), // 指定打包入口js文件
    output: { // 指定输出文件信息
        path: path.join(__dirname, './dist'), // 输出文件目录
        filename: "bundle.js" // 输出文件名称
    },
    plugins: [
        new htmlWebpackPlugin({
            template: path.join(__dirname, './src/index.html'), // 指定要处理的html文件
            filename: "index.html" // 指定生成的文件名，在内存中映射的名称也是访问的名称
        }),
        new VueLoaderPlugin()
    ],

    // 第三方模块配置，样式加载器在此配置
    module: {
        rules: [
            {
                test: /\.css$/, // 正则匹配加载器要处理的文件类型
                use: ['style-loader', 'css-loader'] // 使用加载器，加载器处理顺序是从后往前，所以第一个是css加载器处理，处理完成交给style加载器
            },
            {
                test: /\.less$/, // 处理less样式文件
                use: ['style-loader', 'css-loader', 'less-loader'] // 样式文件处理器，加载器倒序执行处理文件
            },
            {
                test: /\.scss$/, // 处理scss样式文件
                use: ['style-loader', 'css-loader', 'sass-loader'] // 样式文件处理器，加载器倒序执行处理文件
            },
            {
                test: /\.(jpg|png|gif|bmp|jpeg)$/, // 处理样式中引用的资源文件如：图片，字体等
                use: 'url-loader?limit=1024&name=[name]-[hash:4].[ext]' // 传参，默认url-loader将图片转换为base64字符串替换，能减少请求数，但是有时候不想所有图片都转换，此时可以传递参数设置
                // 参数和url传参一摸一样，上面limit=1024代表当图片大小小于该值进行base64编码为字符串，单位是字节
                // 默认文件名会取内容的hash值，为了防止重名，如果要使用原名称增加参数name=[name], [ext]扩展名，
                // 为了防止重名导致图片显示相同，可以加后缀，[hash:4]代表取图片hash 4位
            },
            {
                test: /\.(ttf|woff|woff2|svg|eot)$/, // node_modules/bootstrap/dist/fonts
                use: 'url-loader' // url-loader同样处理字体文件
            },
            { // 处理es6以上高级语法，babel是js编译器
                test: /\.js$/, use: 'babel-loader', exclude: /node_modules/
            },
            { // 解析vue模板
                test: /\.vue$/, use: 'vue-loader'
            }
        ]
    },
    resolve: {
        // 仅使用runtime环境下的vue组件渲染,需要注释掉该配置
        // alias: {
        //     'vue$': 'vue/dist/vue.js' // 以vue结尾的包对应目标文件为xxxx
        // }
    }
};

